<template>
  <div class="order">
    <el-container>
      <el-header height="50px">
        <h3>订单管理</h3>
      </el-header>
      <el-main>
        <el-form :model="query" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="订单号：">
                <el-input v-model="query.orderNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="特惠券包名称：">
                <el-input v-model="query.cbName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="特惠券包ID：">
                <el-input v-model="query.cbId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态：">
                <el-select v-model="query.orderStatus" placeholder="全部">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="手机号：">
                <el-input v-model="query.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会员ID：">
                <el-input v-model="query.userId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付时间：">
                <el-date-picker
                  type="datetime"
                  placeholder="开始日期"
                  v-model="query.orderPayTimeFrom"
                  style="width: 100%;"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="至：">
                <el-date-picker
                  placeholder="结束时间"
                  type="datetime"
                  v-model="query.orderPayTimeTo"
                  style="width: 100%;"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="text-align: center;">
            <el-button type="primary" @click="queryList">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空筛选条件</el-button>
          </el-row>
        </el-form>

        <el-table :data="orderTableData" class="bundle-table">
          <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
          <el-table-column prop="orderSubList[0].cbName" label="特惠券包名称" width="200"></el-table-column>
          <el-table-column prop="orderSubList[0].cbId" label="特惠券包ID" width="80"></el-table-column>
          <el-table-column prop="mobile" label="手机号" width="120"></el-table-column>
          <el-table-column prop="userId" label="会员ID" width="80"></el-table-column>
          <el-table-column prop="totalAmt" :formatter="amtFormat" label="支付金额(元)" width="80"></el-table-column>
          <el-table-column prop="orderStatus" :formatter="statusFormat" label="订单状态" width="80"></el-table-column>
          <el-table-column prop="createTime" :formatter="dateFormat" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="orderPayTime" :formatter="dateFormat" label="支付时间" width="180"></el-table-column>

          <!-- 操作 -->
          <el-table-column prop="id" label="操作按钮" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDetail(scope.row.id)">查看详情</el-button>
              <el-button
                size="mini"
                v-if="scope.row.orderStatus == 2"
                @click="applyBack(scope.row.id)"
              >申请退款</el-button>
              <el-button
                size="mini"
                v-if="scope.row.orderStatus == 11"
                @click="orderBack(scope.row.id)"
              >退款</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="text-align: right; margin-top: 30px;">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :total="total"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import api from "@/api";
import format from "@/utils/format";

export default {
  data() {
    return {
      query: {},
      statusOptions: [
        { value: "1", label: "待支付" },
        { value: "2", label: "已支付" },
        { value: "3", label: "已取消" },
        { value: "4", label: "已退款" },
        { value: "5", label: "已结算" },
        { value: "11", label: "退款中" },
        { value: "", label: "全部" }
      ],
      orderTableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },

  created: function() {
    this.queryList();
  },

  methods: {
    queryList() {
      var query = {
        orderNo: this.query.orderNo,
        cbName: this.query.cbName,
        cbId: this.query.cbId,
        orderStatus: this.query.orderStatus,
        mobile: this.query.mobile,
        userId: this.query.userId,
        orderPayTimeFrom: this.query.orderPayTimeFrom,
        orderPayTimeTo: this.query.orderPayTimeTo,
        pageSize: this.pageSize,
        currPage: this.currentPage
      };
      api.bundle
        .orderList(query)
        .then(res => {
          this.orderTableData = res.data.data.list;
          this.total = res.data.data.totalCount;
        })
        .catch(err => {});
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.queryList();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryList();
    },

    applyBack(val) {
      api.bundle
        .applyBack(val)
        .then(res => {
          this.$alert("申请退款成功！");
          this.queryList();
        })
        .catch(err => {});
    },

    orderBack(val) {
      api.bundle
        .orderBack(val)
        .then(res => {
          this.$alert("退款成功！");
          this.queryList();
        })
        .catch(err => {});
    },

    statusFormat(row, column, cellValue) {
      switch (cellValue) {
        case 1:
          return "待支付";
        case 2:
          return "已支付";
        case 3:
          return "已取消";
        case 4:
          return "已退款";
        case 5:
          return "已结算";
        case 10:
          return "支付中";
        case 11:
          return "退款中";
        default:
          break;
      }
    },

    dateFormat(row, column, cellValue) {
      return format.formatDate(cellValue);
    },

    amtFormat(row, column, cellValue) {
      return format.toRMB(cellValue);
    },

    handleDetail(val) {
      this.$router.push({ path: "/bundle/order/detail", query: { id: val } });
    },

    clearQuery() {
      this.query = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.bundle-table {
  margin-top: 30px;
}
</style>